<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息查询</title>
    <script type="application/javascript" src="./js/data.js"></script>
    <script type="application/javascript" src="./js/index.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!--页面底层布局-->
<div id="particles-js">
    <br/>
    <div class="container">
        <!--用户信息表-->
        <table id="table" class="table index-table">
            <caption class="userInfo-caption">用户数据信息表</caption>
           <thead>
           <tr>
               <th class="title">uid</th>
               <th class="title">用户名</th>
               <th class="title">等级</th>
               <th class="title">Vip</th>
               <th class="title">详细信息</th>
           </tr>
           </thead>
            <tbody id="tbody"></tbody>
        </table>
        <!--翻页按钮-->
        <div class="btn">
            <button type="button" class="btn btn-default" onclick="prePage()">上一页</button>
            <button type="button" class="btn btn-default" onclick="nextPage()">下一页</button>
        </div>
        <!--详细信息窗口-->
        <div id="mask" class="detail-mask"></div>
        <div id="detail" class="detail">
            <h3>详细信息:</h3>
            <div id="content" class="content" data-list=""></div>
            <button type="button" class="btn btn-default btn-close" onclick="hideDetail();">关闭</button>
        </div>
        <p></p>
        <!--查询栏-->
        <div>
            <table class="search-table">
                <tr class="search-table-title">
                    <th style="padding: 5px">查询关键字</th>
                    <th style="padding: 5px">查询匹配值</th>
                    <th></th>
                </tr>
                <tr>
                    <td style="padding: 5px"><label for="input-key"></label><input id="input-key" type="text" placeholder="请输入关键字,如uid"></td>
                    <td style="padding: 5px" ><label for="input-value"></label><input id="input-value"type="text" placeholder="请输入对应的值"></td>
                    <td style="padding: 5px" ><button type="button" class="btn-default btn-search" onclick="searchData()">查询</button></td>
                </tr>
            </table>
        </div>
        <div id="result" class="result">
            <!--结果用户信息表-->
            <table id="resTable" class="table index-table">
                <caption class="caption userInfo-caption">用户信息表</caption>
                <thead>
                <tr>
                    <th class="title">uid</th>
                    <th class="title">用户名</th>
                    <th class="title">等级</th>
                    <th class="title">Vip</th>
                    <th class="title">详细信息</th>
                </tr>
                </thead>
                <tbody id="resTbody"></tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript" src="./js/particles.js"></script>
<script type="text/javascript" src="./js/app.js"></script>
</body>
</html>